<template>
  <el-affix :offset="120">
    <div className="container">
      <ul>
        <li v-for="item in menu" className="choose">
          <div className="name">
            {{ item.name }}
          </div>
          <svg
            t="1664779526933"
            class="icon"
            viewBox="0 0 1024 1024"
            version="1.1"
            xmlns="http://www.w3.org/2000/svg"
            p-id="3040"
            width="20"
            height="20"
          >
            <path
              d="M385.536 102.4l398.848 364.544c12.288 10.752 19.456 26.624 19.456 43.008s-7.168 32.256-19.456 43.008l-398.848 364.544c-18.944 17.92-46.08 23.552-70.656 14.336s-40.96-31.232-43.52-57.344V145.408c2.048-26.112 18.944-48.128 43.52-57.344 24.064-9.216 51.712-3.584 70.656 14.336z"
              fill=""
              p-id="3041"
            ></path>
          </svg>
        </li>
      </ul>
    </div>
  </el-affix>
</template>

<script setup>
import { ref, reactive } from "vue";
const menu = [
  {
    id: 1,
    name: "Hacker圈",
  },
  {
    id: 2,
    name: "全部商品",
  },
  {
    id: 3,
    name: "个人中心",
  },
];
</script>

<style scoped lang="scss">
.el-affix {
  position: absolute;
  top: 800px;
  z-index: 9999;

  .container {
    width: 120px;
    height: 170px;
    border-bottom-right-radius: 10px;
    border-top-right-radius: 10px;
    backdrop-filter: blur(9px);
    -webkit-backdrop-filter: blur(9px);
    border: 1px solid rgba(255, 255, 255, 0.18);
    box-shadow: rgba(142, 142, 142, 0.19) 0px 6px 15px 0px;
    -webkit-box-shadow: rgba(142, 142, 142, 0.19) 0px 6px 15px 0px;
    ul {
      .choose {
        width: 96px;
        display: flex;
        justify-content: space-between;
        padding: 15px;
        font-weight: 900;
        &:hover {
          cursor: pointer;
          color: #ff5000;
          .name {
            transform: translateX(-4px);
            transition: all .5s;
          }
          .icon {
            transform: translateX(8px);
            transition: all .5s;
          }
        }
        .icon {
          margin-top: 2px;
        }
      }
    }
  }
}
</style>
